<!DOCTYPE html>
<html>
<head>
    <title>毛遂兼职网</title>
    <meta http-equiv="pragma" content="no-cache" />
    <meta charset="utf-8" />
    <meta name="description" content="">
    <meta name="author" content="空空.">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="statics/js/lungo/lungo.css"/>
    <link rel="stylesheet" href="statics/js/lungo/lungo.theme.css"/>
    <link rel="stylesheet" href="statics/js/lungo/lungo.icon.css"/>
    <style type="text/css">
        .hdp {padding: 0;margin: auto;overflow:hidden; width:320px; height:160px;background: url(http://ts.50r.cn/templates/mob/images/top_line.gif) no-repeat center 0; background-color:#B0B0B0; position:relative;}
        .hdp li {margin: 0;padding: 0;width:320px; height:160px; float:left; margin-top:1px; border-top: 1px solid #000;}
        .hdp li:not(.big){padding: 0;}
        .hdp li a {width:320px; height:160px; display:block;}
        .hpd_float { width:320px; height:25px; position:absolute; top:136px; left:0px; z-index:5; background-color:#000000;filter:alpha(opacity=50); opacity: 0.5;}
        .hdp_title { width:210px; line-height:24px; font-size:15px; position:absolute; top:136px; left:12px; z-index:10;color: #fff;}
        .hdp_dian {padding-right:10px; height:24px; position:absolute; top:136px; right:0px; z-index:10;}
        .hdp_dian ul li { background:none;width:15px; height:24px; line-height:24px; float:left; overflow:hidden; text-align:right; font-size:14px; color:#DFE0E0; border:0px;/*background: url(bg_png.png) no-repeat -444px 0;*/}
        .hdp_dian ul li.xz { color:#00B4FF;/*background: url(bg_png.png) no-repeat -459px 0;*/}
        .hdp_top {width:320px; height:13px; position:absolute; top:2px; left:0px; z-index:5;background: url(http://ts.50r.cn/templates/mob/images/hdp_top.png) repeat-x 0 0;}
    </style>
</head>
<body>

<section id="main" data-pull="normal" data-transition="slide" data-aside="features" class="drag">
    <header class="bar-title" data-title="毛遂兼职网手机客服端">
        <nav>
            <a href="javascript:;" data-view-aside="features" data-icon="menu"></a>
        </nav>
    </header>
    <article id="main-article" class="list scroll indented active">
            <div class="hdp">
                <div class="hdp_top"></div>
                <ul id="slider" style="width:5000px; position:absolute;z-index:1;left:0px;">
                    <li><img title="斗破苍穹" width="320" src="http://www.maosui.com/attachments/2014/0401/20140401124703966.png" data-link="play.php?act=list&amp;ids=1521"></li>
                    <li><img title="凡女仙葫" width="320" src="http://www.maosui.com/attachments/2014/0411/20140411055630669.jpg" data-link="play.php?act=list&amp;ids=2870"></li>
                    <li><img title="武林萌主" width="320" src="http://www.maosui.com/attachments/2014/0411/20140411025958407.png" data-link="play.php?act=list&amp;ids=2796"></li>
                    <li><img title="人间兵器" width="320" src="http://www.maosui.com/attachments/2014/0401/20140401064816602.png" data-link="#"></li>
                    <li><img title="重紫" width="320" src="http://www.maosui.com/attachments/2014/0404/20140404035734610.png" data-link="play.php?act=list&amp;ids=2791"></li>
                </ul>
                <div class="hdp_dian">
                    <ul>
                        <li class="xz">●</li><li class="">●</li><li class="">●</li><li class="">●</li><li class="">●</li>
                    </ul>
                </div>
                <div class="hdp_title"></div>
                <div class="hpd_float"></div>

            </div>

            <ul id="lists">

            </ul>
    </article>
</section>

</body>
<script type="text/javascript" src="/statics/js/jquery.min.js"></script>
<script type="text/javascript" src="statics/js/quo.js"></script>
<script type="text/javascript" src="statics/js/lungo/lungo.js"></script>
<script type="text/javascript">
    Lungo.init({
        name:'毛遂兼职网',
        version:'0.1',
        cache:false,
        resources: [
            'statics/asides/features.html',
                'statics/asides/login.html'
        ]
    });
    //var $ = $$;


    //首页幻灯片
    var _mob_slide = {
        i: 0,
        t: 0,
        c: 0,
        o: [],
        w: 320,

        slide: function(f){
            if(f== "l"){
                this.i++;
            }else if(f=="r"){
                this.i--;
            }

            if(this.i>=this.c-1){
                this.i = this.c-1;
            }else if(this.i < 0){
                this.i = 0;
            }

            var v = -this.i * this.w;

            this.o.css("-webkit-transition", "left 0.4s ease-out");
            this.o.css("left",v+"px");
            //切换圆点
            $(".hdp_dian").find("li").removeClass("xz").filter('li:eq('+this.i+')').addClass('xz');
            //切换标题
            var title = this.o.find("li").filter("li:eq("+this.i+")").find("img").attr("title");
            $(".hdp_title").html(title);
        },
        autoplay: function(){
            var self = this;
            clearInterval(self.t)
            self.t = setInterval(function(){
                if(self.i>=self.c-1){
                    self.i = -1;
                }
                self.slide('l');
            }, 5000);
        },
        unbind: function(){
            $(".hdp ul").unbind();
        },
        bind: function(){
            var self = this;

            var rx = 0, tx = 0 , ty_end = 0 , ismoved = false;
            $(".hdp ul").live("touchstart", function(){
                event.preventDefault();
                if (!event.touches.length) return;
                var touch = event.touches[0];

                clearInterval(self.t);
                rx = parseInt(this.style.left || 0);
                tx = ty_end= touch.pageX;
            });
            $(".hdp ul").live("touchmove", function(){
                event.preventDefault();
                if (!event.touches.length) return;
                var touch = event.touches[0];

                ty_end=touch.pageX;
                var x = touch.pageX - tx + rx;
                //alert(x);
                if(x<=-(self.c-1)*self.w || x>=0){
                    return;
                }
                $(this).css("-webkit-transition", "left 0s ease-out");
                $(this).css("-webkit-transition",'translate(' + x + 'px, 0px)');
                $(this).css("left",x+"px");
            });
            $(".hdp ul").live("touchend", function(){
                if(ty_end>tx){
                    self.slide("r");
                }else if(ty_end<tx){
                    self.slide("l");
                }
            });
        },
        init: function(){
            this.o = $("#slider");
            this.c = $("#slider li").size();

            this.bind();
            this.slide();
            this.autoplay();
        }
    };

    Lungo.ready(function(){
        $.ajax({
            url: '../mobile/index.php?a=ajax_list',
            dataType:'json',
            beforeSend:function(){
                Lungo.Notification.show();
            },
            complete:function(){
                Lungo.Notification.success('加载成功','','ok',1);
            },
            success: function(rt){
                if(rt){
                    var html = [];
                    for(var i=0;i<rt.length;i++){
                        html.push('<li class="thumb big" cid="'+rt[i].cid+'"><img onerror="this.src=\'http://www.maosui.com/attachments/2014/0304/13939292048019.jpg\'" src="http://www.maosui.com/attachments/'+(new String(rt[i].publishimg).replace('attachments/',''))+'"><div>\
                                <div class="on-right text tiny">'+rt[i].updatetime+'前</div><strong>'+rt[i].gangtitle+'</strong><span class="text tiny opacity">'+rt[i].company+'</span><small>'+rt[i].zhize+'</small></div></li>');
                    }
                    //html.push('</ul>');
                    Lungo.dom('#lists').html(html.join('\n'));
                }
            }
        });

        _mob_slide.init();
    });
</script>
</html>